<template>
    <div>
<h2>会员权益列表</h2>
<input type="button" value="添加" class="btn btn-success" @click="add">
<hr/>
<div>
    权益名称:<input type="text" v-model="model.rightName">
    创建时间:<input type="date"v-model="model.date1">
    结束时间:<input type="date"v-model="model.date2">
    <input type="button" value="查询" class="btn btn-info" @click="getlist">
</div>
<table class="table table-bordered">
      <tbody>
        <tr class="bg-primary">
          <td>Id</td>
          <td>权益名称</td>
          <td>状态</td>
          <td>创建时间</td>
          <td>操作</td>
        </tr> 

        <tr  v-for="item in data.list":key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.RightName}}</td>
          <td>{{item.State==1?"开启":"关闭"}}</td>
          <td>{{item.CreateTime}}</td>
          <td>
            <input type="button" value="删除" class="btn btn-danger" @click="">
            <input type="button" value="修改" class="btn btn-success" @click="">
            <input type="button" value="关闭" v-if="item.State==1" class="btn btn-info" @click="updateState(item.id,item.State)">
            <input type="button" value="开始" v-if="item.State==0" class="btn btn-info" @click="updateState(item.id,item.State)">
          </td>
        </tr> 
    </tbody>
    </table>
    <span>总条数:{{data.count}}</span>
    <span>总页数:{{data.page}}</span>
    <span>当前:{{model.index+'/'+  data.page}}页</span>
    <div>
        <input type="button" value="首页" @click="gopage('a')">
        <input type="button" value="上一页" @click="gopage('b')">
        <input type="button" value="下一页" @click="gopage('c')">
        <input type="button" value="尾页" @click="gopage('d')">
        <input type="number" v-model="page">
        <input type="button" value="跳转" @click="gopage(page)">
      
    </div>

    </div>
</template>

<script setup lang="ts">
 import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';

onMounted(()=>{ 
    getlist();
})

//修改状态
const updateState=(id:any,State:any)=>{
  if(State==1){
    State=0;
  }
  else {
    State=1;
  }

  
axios({
url:'/api/Members/UpdateMemberRightState',
method:'put',
params:{
  id:id,
  state:State,
}

})
.then((res)=>{
  console.log(res);
  if(res.data==1){
alert('修改成功');
getlist();
  }
  else{
    alert('修改失败');
    return;
  }


})
.catch((err)=>{
  console.log(err);
})



}


//实现分页
const gopage = (str: any) => {
  switch (str) {
    case 'a':
      if (model.index == 1) {
       
        return;
      }
      model.index = 1;
      break;
    case 'b':
      if (model.index == 1) {
    
        return;
      }
      model.index--;
      break;
    case 'c':
      //页码+1  到最后一页不能再加了
      if (model.index == data.page) {
     
        return;
      }
      model.index++;
      break;
    case 'd':
      if (model.index == data.page) {
       
        return;
      }
      model.index = data.page;
      break;
      case str:
        //1 非空  2 小于总页数
        if(str==''){
          alert('页数不能为空');
          return;
        }
        if(str<0||str>data.page){
          alert('页数不能小于0,不能大于'+data.page);
          return;
        }
        model.index=str;
      break;
  }
  getlist();
  page.value=model.index;
};

//现实跳转传参
const router=useRouter();
//跳转到添加页面
const add=()=>{
router.push("/memberRightAdd")//跳转到权益添加页面
}

 let model=reactive({
    rightName:'',
    date1:'',
    date2:'',
    index:1,
    size:3,
 })



//接受后端的数据
let data=reactive({
list:[],
count:0,
page:0,
})




//声明变量跳转到第几页
let page=ref(1);

//列表
const getlist=()=>{
axios({
url:'/api/Members/MemberRightLiist',
method:'get',
params:model,
})

.then((res)=>{
    console.log(res);
    data.list=res.data.list;
    data.count=res.data.count;
    data.page=res.data.page;
})

.catch((ree)=>{
    console.log(ree);
})

}





</script>

<style scoped>

</style>